import { useEffect, useState } from "react";
import { Button, Table, Tag, Modal, message } from "antd";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { hideUserDelete } from "@/assets/js/networkRequest/method";
import { statusStr } from "@/assets/js/common";

const { confirm } = Modal;

interface tableProps {
  loding: boolean;
  initFormData: any;
  requestFormData: () => void;
}

const TableCom = ({ loding, initFormData, requestFormData }: tableProps) => {
  const [, setRender] = useState(0);

  // 删除信息弹窗
  const delWarning = (text: any) => {
    confirm({
      title: "提示",
      icon: null,
      content: `确定删除客户[${text.id}]？`,
      okText: "确认",
      okType: "danger",
      cancelText: "取消",
      onOk() {
        hideUserDelete({ id: text.id }).then((res: any) => {
          console.log(res);
          if (res.code === 200) {
            message.info("删除成功");
            requestFormData();
          } else {
            message.info("删除失败");
          }
        });
      },
    });
  };

  // 表头信息
  const columns = [
    {
      title: "电话号码",
      width: 260,
      dataIndex: "customer_phone",
    },
    {
      title: "客户备注名",
      width: 165,
      dataIndex: "customer_remark",
      render: (text: string) => text || "-",
    },
    {
      title: "导入时间",
      width: 200,
      dataIndex: "import_date",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm"),
    },
    {
      title: "客户标签",
      width: 200,
      render: (text: any) => {
        if (!text.length) {
          return "-";
        }
        return (
          <>
            <div className={`${!text.flag ? "overflow-hidden max-h-68" : ""}`}>
              {text.customer_tags.map((item: any) => {
                return (
                  <Tag
                    key={item}
                    color="#fff"
                    className="leading-8 break-normal whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10">
                    {item}
                  </Tag>
                );
              })}
            </div>
            {text.customer_tags.length > 2 ? (
              <div
                className="text-grey-600 cursor-pointer"
                onClick={() => {
                  text.flag = !text.flag;
                  setRender(Math.random() + 1);
                }}>
                {!text.flag ? (
                  <span>
                    展开
                    <DownOutlined />
                  </span>
                ) : (
                  <span>
                    收起
                    <UpOutlined />
                  </span>
                )}
              </div>
            ) : null}
          </>
        );
      },
    },
    {
      title: "添加状态",
      width: 165,
      dataIndex: "customer_status",
      render: (text: number) => statusStr(text),
    },
    {
      title: "添加时间",
      width: 165,
      dataIndex: "added_at",
      render: (text: any) => {
        return text ? dayjs(text * 1000).format("YYYY-MM-DD HH:mm") : "-";
      },
    },
    {
      title: "分配员工",
      width: 200,
      dataIndex: "distribution_employee_name",
      render: (text: any) => {
        return (
          <Tag
            className="leading-8 break-all whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10"
            icon={<i className="iconfont icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>}
            color="#fff">
            {text}
          </Tag>
        );
      },
    },
    {
      title: "分配次数",
      width: 165,
      dataIndex: "distribution_times",
      render: (text: number) => text || "-",
    },
    {
      title: "操作",
      width: 119,
      render: (text: any) => {
        return (
          <div className="flex">
            <Button
              className="py-0 px-8 leading-none border-0 border-r-1 border-solid border-grey-200 h-auto"
              type="link">
              提醒
            </Button>
            <Button
              className="py-0 px-8 leading-none border-0 h-auto"
              type="link"
              onClick={() => {
                delWarning(text);
              }}>
              删除
            </Button>
          </div>
        );
      },
    },
  ];

  useEffect(() => {}, [initFormData]);
  return (
    <Table
      columns={columns}
      loading={loding}
      dataSource={initFormData}
      pagination={false}
      locale={{
        emptyText: (
          <div>
            <img
              className="m-auto"
              alt=""
              src="https://assets.weibanzhushou.com/web/we-work-webapp/group-manage_search-empty.294f614b38df.svg"
            />
            <p>没有搜索到相关结果</p>
          </div>
        ),
      }}
    />
  );
};

export default TableCom;
